<template>
    <view class="content">
        <a-demo title="基础使用">
            <pure-button text="默认按钮" @onClick="handleClick"></pure-button>
        </a-demo>

        <a-demo title="主题按钮">
            <view class="a-flex a-flex-row">
                <pure-button text="主要按钮" class="pure-button-primary" @onClick="handleClick"></pure-button>
                <pure-button text="成功按钮" class="pure-button-success" @onClick="handleClick"></pure-button>
                <pure-button text="危险按钮" class="pure-button-danger" @onClick="handleClick"></pure-button>
                <pure-button text="警告按钮" class="pure-button-warning" @onClick="handleClick"></pure-button>
                <pure-button text="信息按钮" class="pure-button-info" @onClick="handleClick"></pure-button>
            </view>
        </a-demo>

        <a-demo title="图标按钮">
            <view class="a-flex a-flex-row">
                <pure-button class="pure-button-primary" text="图标按钮" icon="__gouwudai" @onClick="handleClick"></pure-button>
                <pure-button class="pure-button-success" icon="__shebei" @onClick="handleClick"></pure-button>
            </view>
        </a-demo>

        <a-demo title="禁用按钮">
            <pure-button class="pure-button-danger" text="禁用按钮" icon="__xiangji" disabled @onClick="handleClick"></pure-button>
        </a-demo>

        <a-demo title="加载按钮">
            <view class="a-flex a-flex-row">
                <pure-button class="pure-button-warning" text="加载按钮" loading @onClick="handleClick"></pure-button>
                <pure-button class="pure-button-primary" text="加载按钮" loadingText="加载中..." loading @onClick="handleClick"></pure-button>
            </view>
        </a-demo>

        <a-demo title="按钮防抖" desc="默认开启了防抖功能，防抖间隔为800ms">
            <view class="a-flex a-flex-row">
                <pure-button class="pure-button-success" text="按钮防抖" icon="__shandian" @onClick="handleClick"></pure-button>
                <pure-button class="pure-button-danger" text="防抖提示" icon="__shandian" @onClick="handleClick" debounceTip="点击太快啦"></pure-button>
            </view>
        </a-demo>

        <a-demo title="按钮副文本">
            <pure-button class="pure-button-primary" text="带副文本的按钮" subtext="我是副文本" @onClick="handleClick"></pure-button>
        </a-demo>

        <a-demo title="圆角按钮">
            <pure-button class="pure-button-round pure-button-success" text="圆角按钮" @onClick="handleClick"></pure-button>
        </a-demo>

        <a-demo title="方形按钮">
            <pure-button class="pure-button-square pure-button-danger" text="方形按钮" @onClick="handleClick"></pure-button>
        </a-demo>

        <a-demo title="朴素按钮">
            <view class="a-flex a-flex-row">
                <pure-button class="pure-button-primary pure-button-plain" text="朴素按钮" @onClick="handleClick"></pure-button>
                <pure-button class="pure-button-success pure-button-plain" text="朴素按钮" @onClick="handleClick"></pure-button>
                <pure-button class="pure-button-danger pure-button-plain" text="朴素按钮" @onClick="handleClick"></pure-button>
                <pure-button class="pure-button-warning pure-button-plain" text="朴素按钮" @onClick="handleClick"></pure-button>
                <pure-button class="pure-button-info pure-button-plain" text="朴素按钮" @onClick="handleClick"></pure-button>
            </view>
        </a-demo>

        <a-demo title="反转按钮" desc="文字在左，图标在右">
            <pure-button class="pure-button-success pure-button-reversal" text="反转按钮" icon="__shebei" @onClick="handleClick"></pure-button>
        </a-demo>

        <a-demo title="块级按钮">
            <pure-button class="pure-button-primary pure-button-block" text="块级按钮" @onClick="handleClick"></pure-button>
        </a-demo>

        <a-demo title="链接按钮">
            <pure-button class="pure-button-primary pure-button-link" text="链接按钮" @onClick="handleClick"></pure-button>
            <pure-button class="pure-button-warning pure-button-link pure-button-underline" text="链接按钮" @onClick="handleClick"></pure-button>
        </a-demo>
    </view>
</template>

<script setup>
    // 点击事件
    function handleClick() {
        uni.showToast({
            title: "点击了按钮",
            icon: "none",
            duration: 400,
        });
    }

    // 获取手机号
    function handleGetPhoneNumber(e) {
        console.log("获取手机号 -- ", e);
    }

    // 获取头像
    function handleChooseAvatar(e) {
        console.log("获取头像", e);
    }

    // 获取用户信息
    function handleGetUserInfo(e) {
        console.log("获取用户信息", e);
    }
</script>

<style scoped>
    .content {
        --pure-theme-primary: #7aff00;
    }

    .pure-button-primary {
        --pure-button-color: red;
    }

    .pure-button-link {
        margin-right: 10px;
    }
</style>
